<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello-react</title>
</head>
<style>
    #position, #position1 {
        text-align: center;
    }

    .backgroundColor {
        background-color: greenyellow;
    }
</style>
<body>
<div id="container"></div>

<!--引入react核心库-->
<script src="../../js-依赖包/react.development.js"></script>
<!--引入react.dom 用于支出react操作DOM-->
<script src="../../js-依赖包/react-dom.development.js"></script>
<!--引入babel  用于将jsx转换为js-->
<script src="../../js-依赖包/babel.min.js"></script>

<script type="text/babel"> //这里一定要将类型写为babel

let myId = 'poSiTION'
let content = 'Hello React'

// 1. 创建虚拟DOM
const vDom = ( //不要写引号 因为这里不是字符串
    <div>
        <h1 className="backgroundColor" id={myId.toLowerCase()}>
            <span style={{color: 'pink'}} id="title">{content}</span>
        </h1>
        <h1 className="backgroundColor" id={myId.toLowerCase() + 1}>
            <span style={{color: 'skyblue'}} id="title1">{content}</span>
        </h1>
        <input type="text"/>
    </div>
//  jsx 语法规则：
//      * 定义虚拟DOM时，不要写引号
//      * 标签中混入js表达式时要用{}
//      * 样式的类名指定为className 不能使用class
//      * 内联样式，要使用style={{key:'value'}}的形式书写
//      * 虚拟DOM使用一个根标签
//      * 标签必须闭合 (可以写结束标签或者自结束标签)
//      * 标签首字母
//          - 若是小写字母开头，则标签名会被转换为html中同名的标签 如果html中没有同名标签就会报错
//          - 若是大写字母开头，则react就去渲染对应的组件 若组件没被定义 就会报错
)
// debugger   // 断点
// 2. 渲染虚拟DOM到页面
ReactDOM.render(vDom, document.getElementById('container'))
</script>

</body>
</html>